<template>
  <view class="news">
    <!-- 搜索 -->
    <navigator class="news-search px-[24rpx] py-[14rpx] bg-white" url="/pages/search/search">
      <u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
    </navigator>

    <!-- 内容 -->
    <tab-list :current="current" @change="handleChange" height="80" bar-width="60" :barStyle="{ bottom: '0' }">
      <tab-item v-for="(item, index) in tabList" :key="index" :name="item.name">
        <view class="news-list pt-[20rpx]">
          <newsList :cid="item.id" :index="index" :current="current"></newsList>
        </view>
      </tab-item>
    </tab-list>
    <tabbar />
  </view>
</template>
<script>
  
import newsList from './component/newsList.vue';
export default {
  components: { newsList },
  data() {
    return {
      tabList: [],
      current: 0
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    async getData() {
      const data = await uni.$u.api.getArticleCate();
      this.tabList = [{ name: '全部', id: '' }].concat(data);
    },
    handleChange(index) {
      console.log(index);
      this.current = Number(index);
    }
  }
};
</script>

<style lang="scss">
.news {
  &-search {
    margin-bottom: 2rpx;
  }

  &-list {
    height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
  }
}
</style>
